const lantern = document.getElementById("lantern");
const tips = document.getElementById("tips");
const close = document.getElementById("close");
const description = $("#description");
const brand = $("#brand");
const keywords = $("#keywords");
const fixed = $(".fixed");
const show_content = $("#show_content");
const show_fivePoints = $("#show_fivePoints");
var standard_answer = "Product Title: Women's Floral Tie Knot Dresses Cut Out Side Split Hem Sleeveless Backless Midi Dress Camouflage M\n" +
    "\n" +
    "Product Function Detailed Explanation:\n" +
    "The Women's Floral Tie Knot Dress is a chic and versatile addition to your wardrobe. This sleeveless midi dress combines style and comfort effortlessly. It features a trendy tie knot at the front, adding a fashionable twist to your outfit. The cut-out side design and backless feature exude an alluring charm, making it perfect for various occasions, from casual outings to special events.\n" +
    "\n" +
    "Specification Information:\n" +
    "- Material: High-quality blend of polyester and spandex for durability and stretch\n" +
    "- Size: Medium (M)\n" +
    "- Length: Midi length with a side split hem\n" +
    "- Closure: Back zipper for easy wear\n" +
    "- Pattern: Camouflage with vibrant floral print\n" +
    "\n" +
    "Usage Instructions:\n" +
    "1. Carefully unzip the dress from the back.\n" +
    "2. Slide your arms through the sleeveless design.\n" +
    "3. Step into the dress and pull it up to your waist.\n" +
    "4. Secure the back zipper.\n" +
    "5. Tie the knot at the front to your desired tightness.\n" +
    "6. Adjust the dress for comfort, ensuring the cut-out sides and backless feature align correctly.\n" +
    "\n" +
    "Additional Information:\n" +
    "- Style and Comfort: This dress seamlessly blends fashion with comfort, offering a flattering silhouette and ease of movement.\n" +
    "- Versatile Occasions: Suitable for various events, from casual outings to date nights, weddings, and parties.\n" +
    "- Easy Maintenance: Machine washable for hassle-free cleaning.\n" +
    "- Sizing Note: Please refer to the size chart to ensure the perfect fit.\n" +
    "- Unique Design: The camouflage pattern combined with the floral print creates a captivating and trendy look.\n" +
    "\n" +
    "Five Points Description:\n" +
    "1. Chic and Alluring: Elevate your style with this backless midi dress featuring a tie knot front and cut-out sides for a trendy and alluring look.\n" +
    "2. High-Quality Material: Made from a blend of polyester and spandex, this dress offers durability and stretch for a comfortable fit.\n" +
    "3. Versatile Wardrobe Addition: Ideal for various occasions, from casual outings to special events, this dress is a versatile choice for your wardrobe.\n" +
    "4. Easy to Wear: The back zipper ensures easy wear, and the machine-washable design makes maintenance a breeze.\n" +
    "5. Unique Camouflage Floral: Stand out with the captivating combination of a camouflage pattern and vibrant floral print, making this dress a fashion statement.";
lantern.addEventListener("click", function () {
    tips.style.transform = "translateY(0)";
    tips.style.transition = "all .5s ease";
});
close.addEventListener("click", function () {
    tips.style.transition = "all .5s ease";
    tips.style.transform = "translateX(-352px)";
    setTimeout(() => {
        tips.style.transform = "translate(-352px, -498px)";
    }, 500);
    setTimeout(() => {
        tips.style.transform = "translate(0, -498px)";
    }, 1000);
    setTimeout(() => {
        tips.style.transform = "translateY(-450px)";
    }, 1500);
});
$("#generate").click(function () {
    if (description.val() == "") {
        alert("描述一定要填写好喔~");
    } else {
        fixed.show();
        generate_content();
        // generate_fivePoints();
    };
});

function generate_content() {
    var b =
        "Please generate 1 clear and detailed product descriptions, and please do not do anything with the font:\n" +
        'And with old title for reference: "' +
        description.val() +
        '"\n';
    b +=
        brand.val() !== "" ? 'And the brand name is": ' + brand.val() + '"\n' : "";
    if (keywords.val() !== "") {
        var c = keywords.val().split(";");
        var d = c
            .map(function (a) {
                return `"${a}"`;
            })
            .join(", ");
        b += `And keywords can be added or not in the title if needed:${d}\n`;
    };
    b += "And fill details in these sections: ";
    b += brand.val() !== "" ? '"Brand Story",' : "";
    b +=
        '"Product Function Detailed Explanation", "Specification Information", "Usage Instructions", "Additional Information"\n' +
        "Then generate a five points description according to Amazon five points description.\n" +
        // "Please expand the five points description based on these points: \"Versatile Design\", \"Breathable Fabric\", \"Effortless Style\", \"Easy Sizing\", \"Trend and Functional\"\n" +
        // "And please do not repeat points between each section.\n" +
        "The language of the answer should be English";
    var e = {
        "url": "https://ai.fakeopen.com/v1/chat/completions",
        "method": "POST",
        "headers": {
            "Authorization": "Bearer pk-this-is-a-real-free-pool-token-for-everyone",
            "Content-Type": "application/json"
        },
        "data": JSON.stringify({
            "model": "gpt-3.5-turbo",
            "messages": [
                {"role": "user", "content": "Please generate 1 clear and detailed product descriptions\n" +
                        "And with old title for reference: \"Women's Summer Dresses Casual Loose Sleeve V Neck Boho Beach Dress\"\n" +
                        "And keywords can be added or not in the title if needed: \"black long sleeve dress\",\"black cocktail dress\",\"plus size cocktail dresses\"\n" +
                        "Write a headline at the beginning that combines the brand name with the old headline, the brand name is TQueen\n" +
                        "And fill details in these sections: \"Brand Story\",\"Product Story\",\"Product Function Detailed Explanation\",\"Specification Information and Usage Instructions\", \"Additional Information\", \"Notes\", \"Warning Information\"\n" +
                        "The language of the answer should be English"},
                {"role": "assistant", "content": standard_answer},
                {"role": "user", "content": b},
            ],
        }),
    };
    // var e = {
    //     "url": "https://api.chatanywhere.com.cn/v1/chat/completions",
    //     "method": "POST",
    //     "timeout": 0,
    //     "headers": {
    //         "Authorization": "Bearer sk-charnwBnSI6H0ffbMOX9MYVsw0aU8HILrU6dBfUvvjfEDWTo",
    //         "Content-Type": "application/json"
    //     },
    //     "data": JSON.stringify({
    //         "model": "gpt-3.5-turbo",
    //         "messages": [{"role": "user", "content": b}]
    //     })
    // };
    $.ajax(e).done(function (a) {
        // generate_translation(a.choices[0].message.content);
        var answer = (a.choices[0].message.content).replaceAll("**", "");
        var number = answer.indexOf("Five Points Description");
        var fivePoints = answer.slice(number);
        show_content.val(answer.slice(0, number));
        show_fivePoints.val(fivePoints);
        fixed.hide();
    });
};

// function generate_fivePoints() {
//     var question = "Please generate 1 clear and detailed product descriptions\n" +
//         "And with old title for reference: \"" + description.val() + "\"\n";
//     if (keywords.val() !== "") {
//         var c = keywords.val().split(";");
//         var d = c
//             .map(function (a) {
//                 return `"${a}"`;
//             })
//             .join(", ");
//         question += `And keywords can be added or not in the title if needed:${d}\n`;
//     }
//     question += "And fill details in these sections: \"Versatile Design\",\"Breathable Fabric\",\"Effortless Style\",\"Easy Sizing\", \"Trend and Functional\"\n" +
//         "For each answer you give me, please use `^^^^^` symbols before the first word and `^^^^^` symbols after the last word.\n" +
//         "The language of the answer should be English";
//     var e = {
//         "url": "https://ai.fakeopen.com/v1/chat/completions",
//         "method": "POST",
//         "headers": {
//             "Authorization": "Bearer pk-this-is-a-real-free-pool-token-for-everyone",
//             "Content-Type": "application/json"
//         },
//         "data": JSON.stringify({
//             "messages": [{"role": "user", "content": question}],
//             "model": "gpt-3.5-turbo",
//             "temperature": 1,
//             "presence_penalty": 0,
//             "top_p": 1,
//             "frequency_penalty": 0,
//             "stream": false
//         })
//     }
//     $.ajax(e).done(function (a) {
//         // generate_translation(a.choices[0].message.content);
//         $("#show_fivePoints").val(a.choices[0].message.content);
//     });
//
// }

// function generate_translation(b) {
//     var c = "Please translate the following content to chinese:\n" + b;
//     var d = {
//         url: "https://ai.fakeopen.com/v1/chat/completions",
//         method: "POST",
//         timeout: 0,
//         headers: {
//             "Authorization": "Bearer pk-this-is-a-real-free-pool-token-for-everyone",
//             "Content-Type": "application/json"
//         },
//         data: JSON.stringify({
//             "messages": [{ "role": "user", "content": c }],
//             "model": "gpt-3.5-turbo",
//             "temperature": 1,
//             "presence_penalty": 0,
//             "top_p": 1,
//             "frequency_penalty": 0,
//             "stream": true
//         })
//     };
//     $.ajax(d).done(function (a) {
//         $("#show_translation").val(a.choices[0].message.content);
//     });
// }